import Layout from '@/components/Layouts';
import Tabs from '@/components/Tabs';
import { Helmet, useIntl } from 'umi';

import { formatNumber, jumpUrl } from '@/utils';

import { Carousel, Col, Divider, Flex, Space } from 'antd';
import { useState } from 'react';
import '../Home/index.less';
import './index.less';

import woman from '@/assets/home_swiper_bg3.png';
import star from '@/assets/land_star.png';
import topPrev from '@/assets/land_toplefticon.png';
import topNext from '@/assets/land_toprighticon.png';
import AuthButton from '@/components/AuthButton';
import { serviceList } from '@/utils/common';
import CountUp from 'react-countup';
const Land: React.FC = () => {
  const intl = useIntl();
  const isEn = intl.locale == 'en-US';
  const list = new Array(4).fill(0);
  const [index, setIndex] = useState(0);
  const bankList = [
    {
      height: 26,
      key: 1,
    },
    {
      height: 31,
      key: 2,
    },
    {
      height: 25,
      key: 3,
    },
    {
      height: 36,
      key: 4,
    },
    {
      height: 36,
      key: 5,
    },
    {
      height: 30,
      key: 6,
    },
    { height: 28, key: 7 },
    { height: 55, key: 8 },
    {
      height: 27,
      key: 13,
    },
    {
      height: 36,
      key: 10,
    },
    {
      height: 45,
      key: 11,
    },
    {
      height: 36,
      key: 12,
    },
  ];
  const contentList = new Array(3).fill(0);
  const trustList = ['Orlando Diggs', 'Mollie Hall', 'Lori Bryson'];
  return (
    <>
      <Helmet>
        <title>{intl.formatMessage({ id: 'home.meta_title' })}</title>
      </Helmet>
      <div className="home">
        <Layout
          fixed
          className="home_layout_bg"
          style={{
            backgroundSize: '100% 400px',
          }}
        >
          <div>
            <div
              style={{ margin: '52px 0 0 0', paddingBottom: isEn ? 90 : 120, position: 'relative' }}
            >
              <div
                className="home_title"
                style={{
                  letterSpacing: isEn ? 0 : 1,
                  wordSpacing: '-2px',
                  marginBottom: 14,
                }}
              >
                {intl.formatMessage({ id: `home.free` })}
              </div>

              <div
                className="home_title_word"
                style={{
                  fontSize: 30,
                  color: '#fff',
                  paddingBottom: 24,
                  width: 760,
                  lineHeight: isEn ? '30px' : '42px',
                }}
              >
                {intl.formatMessage({ id: `home.low` })}
              </div>
              <img
                style={{
                  position: 'absolute',
                  right: 16,
                  top: -47,
                }}
                width={270}
                height={270}
                src={require(`@/assets/home_swiper_bg${1}.png`)}
              />
            </div>
          </div>

          <div className="common" style={{ position: 'absolute', bottom: -70 }}>
            <Tabs
              className="home_tabs"
              isHome
              onFinish={(value) => {
                jumpUrl('/product', { ...value });
              }}
              needBottomContent={false}
            />
          </div>
        </Layout>
        <div className="land">
          <div className="common">
            <div style={{ fontSize: 34, fontWeight: 'bold', textAlign: 'center', color: '#333' }}>
              {intl.formatMessage({ id: 'home.land_title' })}
            </div>
            {/* 问题 */}
            <Flex gap={50} justify="space-between">
              {list.map((_, i) => {
                return (
                  <div
                    // eslint-disable-next-line react/no-array-index-key
                    key={i}
                    onClick={() => {
                      setIndex(i);
                    }}
                    className={`${i == index ? 'land_problem_item_active' : ''} land_problem_item`}
                  >
                    {intl.formatMessage({ id: `home.land_word${i}` })}
                  </div>
                );
              })}
            </Flex>
            <div className="land_problem_word">
              <div
                className="land_problem_triangle"
                style={{ transform: `translateX(${index * 300}px)` }}
              />
              {intl.formatMessage({ id: `home.land_answer${index}` })}
            </div>
            {/* 服务 */}
            <div style={{ textAlign: 'center', margin: '80px 0 40px 0', fontSize: 34 }}>
              {intl.formatMessage({ id: 'home.land_service' })}
            </div>
            <div
              style={{
                textAlign: 'center',
                width: 760,
                margin: '0 auto',
                fontSize: 20,
                lineHeight: '26px',
                color: '#666',
              }}
            >
              {intl.formatMessage({ id: 'home.land_service_title' })}
            </div>

            <Carousel
              style={{ margin: '40px 0 80px 0' }}
              dots={false}
              autoplaySpeed={1000}
              slidesToShow={6}
              arrows={false}
              autoplay
              infinite
            >
              {bankList.map((item) => {
                const { height, key } = item;
                return (
                  <div style={{ width: '100%' }} key={key}>
                    <div className="home_bottom_swiper_item_bg" style={{ margin: '0 10px' }}>
                      <img height={height} src={require(`@/assets/s${key}.png`)} />
                    </div>
                  </div>
                );
              })}
            </Carousel>
            {/* 内容 */}
            {contentList.map((_, index) => {
              const isOdd = index % 2 == 0;
              return (
                <Flex
                  // eslint-disable-next-line react/no-array-index-key
                  key={index}
                  gap={69}
                  style={{ marginBottom: 80, flexDirection: isOdd ? 'row' : 'row-reverse' }}
                >
                  <div>
                    <div style={{ fontSize: 36, fontWeight: 700 }}>
                      {intl.formatMessage({ id: `home.land_ai${index}` })}
                    </div>
                    <div
                      style={{
                        fontSize: 18,
                        paddingRight: 56,
                        lineHeight: '27px',
                        margin: '18px 0  40px 0',
                      }}
                    >
                      {intl.formatMessage({ id: `home.land_ai_title${index}` })}
                    </div>
                    <Flex gap={60}>
                      {new Array(2).fill(0).map((_, i) => {
                        const newIndex = index * 2 + i;
                        return (
                          // eslint-disable-next-line react/no-array-index-key
                          <div style={{ flex: 1 }} key={i}>
                            <img
                              width={50}
                              height={50}
                              style={{ marginLeft: 14 }}
                              src={require(`@/assets/land_icon${newIndex}.png`)}
                            />
                            <div style={{ margin: '11px 0 15px 0', fontWeight: 700, fontSize: 20 }}>
                              {intl.formatMessage({ id: `home.land_ai_item_title${newIndex}` })}
                            </div>
                            <div style={{ fontSize: 16 }}>
                              {intl.formatMessage({ id: `home.land_ai_item_word${newIndex}` })}
                            </div>
                          </div>
                        );
                      })}
                    </Flex>
                  </div>

                  <div>
                    <img width={450} height={400} src={require(`@/assets/land_img${index}.png`)} />
                  </div>
                </Flex>
              );
            })}
            {/* 信任 */}
            <div>
              <div style={{ fontSize: 34, textAlign: 'center' }}>
                {intl.formatMessage({ id: 'home.land_trust' })}
              </div>
              <Carousel
                nextArrow={<img src={topNext} />}
                prevArrow={<img src={topPrev} />}
                dots={false}
                autoplaySpeed={6000}
                className="home_top_swiper land_trust_swiper"
                arrows
                slidesToShow={3}
                infinite
                style={{ marginBottom: 89 }}
              >
                {trustList.map((item, index) => {
                  return (
                    <Col key={item} className="land_trust_items">
                      <Flex className="land_trust_item">
                        <Flex gap={4}>
                          {new Array(5).fill(0).map((_, index) => {
                            // eslint-disable-next-line react/no-array-index-key
                            return <img width={24} height={24} src={star} key={index} />;
                          })}
                        </Flex>
                        <Flex style={{ margin: 'auto 0', lineHeight: '28px', fontSize: 18 }}>
                          <div>{intl.formatMessage({ id: `home.land_trust_word${index}` })}</div>
                        </Flex>
                        <Flex gap={16} align="center">
                          <img
                            width={48}
                            height={48}
                            src={require(`@/assets/land_user${index}.png`)}
                          />
                          <div style={{ fontWeight: 600, fontSize: 16 }}>{item}</div>
                        </Flex>
                      </Flex>
                    </Col>
                  );
                })}
              </Carousel>
            </div>
          </div>
          <div className="land_loan">
            <div className="common" style={{ position: 'relative' }}>
              <div className="land_loan_bg" />
              <Flex>
                <div style={{ position: 'relative', zIndex: 3 }}>
                  <div className="land_loan_word">
                    {intl.formatMessage(
                      { id: 'home.land_apply' },
                      {
                        amount: (
                          <>
                            HK$
                            <span
                              className="land_loan_number"
                              style={{ fontSize: isEn ? 42 : 70, marginBottom: isEn ? 0 : 10 }}
                            >
                              {formatNumber(10000, false)}
                            </span>
                          </>
                        ),
                      },
                    )}
                  </div>
                  <Flex style={{ paddingBottom: 58 }} justify="center">
                    <AuthButton
                      style={{
                        height: 80,
                        minWidth: 300,
                      }}
                      type="text"
                      className="land_loan_btn"
                      onClick={() => {
                        jumpUrl('/product');
                      }}
                    >
                      {intl.formatMessage({ id: 'center.apply_now' })}
                    </AuthButton>
                  </Flex>
                </div>
                <div style={{ position: 'absolute', bottom: 0, zIndex: 2, right: -10 }}>
                  <img src={woman} width={360} height={360} />
                </div>
              </Flex>
            </div>
          </div>
          {/* 成立 */}
          <div className="land_set common">
            <div className="land_set_title">{intl.formatMessage({ id: 'home.land' })}</div>
            <Flex justify="space-around" align="center">
              {serviceList.map((item, index) => {
                const { title, word, value } = item;
                return (
                  <>
                    <div key={title}>
                      <Flex gap={24} align="center">
                        <div>
                          <img
                            src={require(`@/assets/why-chooseus-total-active-icon${index + 1}.svg`)}
                          />
                        </div>
                        <div style={{ textAlign: 'left' }}>
                          <Space size={12} align="baseline">
                            <div
                              style={{
                                fontSize: 54,
                                fontWeight: 'bold',
                                color: '#123ba4',
                                lineHeight: '62px',
                              }}
                            >
                              <CountUp separator="" end={value} />
                            </div>
                            {word}
                          </Space>
                          <div style={{ marginTop: 10, fontSize: 16, color: '#666' }}>
                            {intl.formatMessage({ id: title })}
                          </div>
                        </div>
                      </Flex>
                    </div>
                    {serviceList.length - 1 !== index ? (
                      <Divider
                        style={{ height: 40, borderInlineStart: '1px solid #999' }}
                        type="vertical"
                      />
                    ) : null}
                  </>
                );
              })}
            </Flex>
          </div>
        </div>
      </div>
    </>
  );
};

export default Land;
